home *** CD-ROM | disk | FTP | other *** search
/ Exame Informatica 142 / Exame Informatica 142.iso / Programas / paintnet / PaintDotNet_3_01_BetaNews.exe / PaintDotNetSetup.exe / PaintDotNet.msi / _8C2D06CCBD0E5D0340AA9DA9852E862E < prev    next >
Encoding:
Text File  |  2007-01-11  |  14.0 KB  |  293 lines
  1. <html>
  2.  
  3. <!-- #BeginTemplate "pdn_help.dwt" -->
  4.  
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <!-- #BeginEditable "title" -->
  8. <title>Paint.NET Help - Layers and Blend Modes</title>
  9. <!-- #EndEditable -->
  10. <link rel="stylesheet" type="text/css" href="../stylesheet.css">
  11. </head>
  12.  
  13. <body>
  14.  
  15. <div id="banner">
  16.     <a href="http://www.getpaint.net/">
  17.     <img border="0" src="../images/logo.png"></a><p>
  18.      </div>
  19. <div id="leftnav">
  20.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  21.         <li><a href="index.html">Overview</a><br>
  22.         </li>
  23.         <li><a href="Features.html">Features</a><br>
  24.         <a href="Tutorials.html">Tutorials</a><br>
  25.         <a href="WhatsNew.html">What's New?</a><br>
  26.         </li>
  27.     </ul>
  28.     <h3>Concepts</h3>
  29.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  30.         <li><a href="LayersAndBlendModes.html">Layers and Blend Modes</a></li>
  31.     </ul>
  32.     <h3>User Interface</h3>
  33.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  34.         <li><a href="KeyboardMouseCommands.html">Keyboard & Mouse Commands</a></li>
  35.         <li><a href="MainWindow.html">Main Window</a></li>
  36.         <li><a href="ImageList.html">Image List</a></li>
  37.         <li><a href="MenuBar.html">Menu Bar</a>
  38.         <ul class="toc">
  39.             <li><a href="FileMenu.html">File</a></li>
  40.             <li><a href="EditMenu.html">Edit</a></li>
  41.             <li><a href="ViewMenu.html">View</a></li>
  42.             <li><a href="ImageMenu.html">Image</a></li>
  43.             <li><a href="LayersMenu.html">Layers</a>
  44.             <ul class="toc">
  45.                 <li class="comment"><a href="RotateZoom.html">Rotate / Zoom</a></li>
  46.             </ul></li>
  47.             <li><a href="AdjustmentsMenu.html">Adjustments</a> 
  48.                 <ul class="toc">
  49.                     <li><a href="Curves.html">Curves</a></li>
  50.                     <li><a href="Levels.html">Levels</a></li>
  51.                 </ul></li>
  52.             <li><a href="EffectsMenu.html">Effects</a></li>
  53.             <li><a href="WindowMenu.html">Window</a></li>
  54.             <li><a href="HelpMenu.html">Help</a></li>
  55.         </ul>
  56.         </li>
  57.         <li><a href="Toolbar.html">Toolbar</a></li>
  58.         <li><a href="ToolsWindow.html">Tools Window</a><ul class="toc">
  59.             <li><a href="SelectionTools.html">Selection Tools</a></li>
  60.             <li><a href="MoveTools.html">Move Tools</a><br>
  61.             <a href="MagicWand.html">Magic Wand</a></li>
  62.             <li><a href="GradientTool.html">Gradient Tool</a><br>
  63.             <a href="Paintbrush.html">Paintbrush</a></li>
  64.             <li><a href="EraserTool.html">Eraser Tool</a></li>
  65.             <li><a href="PixelTools.html">Pixel Tools</a></li>
  66.             <li><a href="ShapeTools.html">Shape Tools</a></li>
  67.             <li><a href="LineCurve.html">Line / Curve Tool</a></li>
  68.             <li><a href="TextTool.html">Text Tool</a></li>
  69.             <li><a href="PaintBucket.html">Paint Bucket</a></li>
  70.             <li><a href="CloneStamp.html">Clone Stamp</a></li>
  71.             <li><a href="RecolorTool.html">Recolor Tool</a></li>
  72.         </ul>
  73.         </li>
  74.         <li><a href="HistoryWindow.html">History Window</a></li>
  75.         <li><a href="LayersWindow.html">Layers Window</a></li>
  76.         <li><a href="ColorsWindow.html">Colors Window</a></li>
  77.         <li><a href="StatusBar.html">Status Bar</a></li>
  78.     </ul>
  79.     </li>
  80.     <h3>Other</h3>
  81.     <ul class="toc" style="margin-left: 0; padding-left: 0;">
  82.         <li><a href="FAQ.html">FAQ (Frequently Asked Questions)</a></li>
  83.         <li><a href="UnattendedInstallation.html">Unattended Installation</a></li>
  84.         <li><a href="SystemRequirements.html">System Requirements</a></li>
  85.         <li><a href="WebLinks.html">Web Links</a></li>
  86.         <li><a href="License.html">License</a></li>
  87.     </ul>
  88. </div>
  89. <div id="content">
  90.     <!-- #BeginEditable "content" -->
  91.     <h2>Layers and Blend Modes</h3><p>Paint.NET allows you to use layers and 
  92.     blending modes as the foundation for composing images.</p>
  93.     <h3><a name="Layers"></a>Layers</h3>
  94.     <p>For this discussion the following two images will be used for the 
  95.     background layer and for the 1st layer that is placed on top of the 
  96.     background layer:</p>
  97.     <table border="0" width="50%">
  98.         <tr>
  99.             <td>
  100.             <p align="center">
  101.             <img border="1" src="../images/BlendModes_Layer1.jpg"></p>
  102.             <p align="center">Background Layer - Picture of a Classic Camaro<br>
  103.             ("Bottom Layer")</td>
  104.             <td>
  105.             <p align="center">
  106.             <img border="1" src="../images/BlendModes_Layer2.jpg"></p>
  107.             <p align="center">Layer 1 - Picture of Seattle<br>
  108.             ("Top Layer")</td>
  109.         </tr>
  110.     </table>
  111.     <p>You may think of "layers" as a stack of transparency slides that, when 
  112.     viewed together, form a complete image. Paint.NET displays this stack as if 
  113.     you were viewing it from the top and with no perspective (layers do not get 
  114.     "smaller" when they are closer to the bottom of the stack, which would place 
  115.     them "farther away"). To better visualize how layers work, it may help if we 
  116.     view the layer stack from the side instead of from the top:</p>
  117.     <p>
  118.     <img border="0" src="../images/LayerStack3D.jpg"></p>
  119.     <h3><a name="PixelsAndTransparency"></a>Pixels and Transparency</h3>
  120.     <p>Every layer in Paint.NET is composed of
  121.     <a href="http://en.wikipedia.org/wiki/Pixel">pixels</a> which are stored in 
  122.     the <a href="http://en.wikipedia.org/wiki/RGBA_color_space">RGBA</a> format. 
  123.     The RGB part stands for red-green-blue, and is used to store traditional 
  124.     color intensity. The "A" is for alpha and is used to store information about 
  125.     the transparency of a pixel. This alpha value may range from 0 (completely 
  126.     transparent) to 255 (completely opaque). (Other software may refer to this 
  127.     as ranging from 0% to 100%.) If a pixel is transparent, then pixels from the 
  128.     layers below will show through. Paint.NET uses a technique called
  129.     <a href="http://en.wikipedia.org/wiki/Alpha_compositing">alpha compositing</a> 
  130.     to be able to display a layered image on a standard computer monitor.</p>
  131.     <p>However, transparent pixels cannot be displayed on a computer monitor. In 
  132.     order to simulate this Paint.NET uses a checkerboard pattern, which looks 
  133.     like this:</p>
  134.     <blockquote>
  135.         <p><img border="1" src="../images/TransparentCheckerboard.png"></p>
  136.     </blockquote>
  137.     <p>If you see this then it means that part of your image is transparent -- 
  138.     the checkerboard pattern is not actually part of the image. You may think of 
  139.     the checkerboard pattern as a virtual background layer, or "layer zero," 
  140.     which is always below all layers that are shown in the
  141.     <a href="LayersWindow.html">Layers window</a>. However, as previously 
  142.     mentioned, it is not actually part of the image. If you save the image and 
  143.     then view or load it with other software then the checkerboard pattern will 
  144.     not be there (unless, of course, if that other software also uses a 
  145.     checkerboard pattern to simulate transparency).</p>
  146.     <h3><a name="LayersAndOpacity"></a>Layers and Opacity</h3>
  147.     <p>While every pixel has transparency information associated with it, every 
  148.     layer also has an associated opacity value. The two terms are similar and in 
  149.     most cases can be treated as the same. You may think of a layer's opacity 
  150.     value as a "dimmer" for the alpha values of every pixel in the layer.</p>
  151.     <p>For example, if we take the top layer and adjust its opacity from 255 
  152.     gradually down to 0, we will get the following images, shown as both 
  153.     conceptual stacks and as it would be shown on the computer monitor:</p>
  154.     <table border="0" width="50%">
  155.         <tr>
  156.             <td width="683">
  157.             <p align="center">
  158.             <img border="0" src="../images/LayerStack3D.jpg" width="360" height="168"><img border="1" src="../images/BlendModes_Layer2.jpg"></p>
  159.             <p align="center">Layer 1 at 255 opacity (100%)<br>
  160.             Completely opaque: The car is not visible.</td>
  161.         </tr>
  162.         <tr>
  163.             <td width="683">
  164.             <p align="center">
  165.             <img border="0" src="../images/LayerStack3D_128.jpg" width="360" height="168"><img border="1" src="../images/BlendMode_Normal_128.jpg"></p>
  166.             <p align="center">Layer 1 at 128 opacity (about 50%)<br>
  167.             Partially transparent: The picture of Seattle is partially visible.</td>
  168.         </tr>
  169.         <tr>
  170.             <td width="683">
  171.             <p align="center">
  172.             <img border="0" src="../images/LayerStack3D_0.jpg" width="360" height="168"><img border="1" src="../images/BlendModes_Layer1.jpg"> </p>
  173.             <p align="center">Layer 1 at 0 opacity (0%)<br>
  174.             Completely transparent: The picture of Seattle is not visible.</td>
  175.         </tr>
  176.     </table>
  177.     <h3><a name="BlendModes"></a>Blend Modes</h3>
  178.     <p>A layer's blend mode specifies how it is blended with the layers below 
  179.     it. To change a layer's blend mode, click on the respective layer and then 
  180.     open its Properties (via the Layers menu, the Properties button, or by 
  181.     double clicking the layer). The following dialog will be shown:</p>
  182.     <blockquote>
  183.         <p>
  184.         <img border="0" src="Images/LayerProperties.png"></p>
  185.     </blockquote>
  186.     <p>Not all blend modes are easy to understand in classic or intuitive terms, 
  187.     and because of this we recommend that you experiment and make use of the
  188.     <a href="http://www.getpaint.net/redirect/forum.html">forum</a> for asking 
  189.     questions and getting tips. Each blend mode is described below along with an 
  190.     image composed of the two layers discussed previously, but with the 
  191.     respective blend mode selected and the opacity set to 255.</p>
  192.     <p>In the discussions below, the term <i>composition </i>will be used. This 
  193.     refers to the result of blending all of the layers below the current layer 
  194.     which is being discussed. The "final" composition is what you see on the 
  195.     screen while working with the image. However, for this discussion we need to 
  196.     refer to the composition as it is being composed, layer by layer.</p>
  197.     <ul>
  198.         <li><h3><a name="Normal"></a>Normal</h3><p>This is the default and 
  199.         standard blend mode. Each pixel in the layer is blended with the 
  200.         composition depending on its alpha value.</p></li>
  201.         <li><h3><a name="Multiply"></a>Multiply</h3><p>Each pixel component's 
  202.         intensity is multiplied with the pixel value in the composition. The 
  203.         result of using this blend mode is always pixels that are darker than 
  204.         the original. White pixels have no effect and are thus effectively 
  205.         transparent. </p>
  206.         <p><img border="1" src="../images/BlendMode_Multiply.jpg"></p>
  207.         </li>
  208.         <li><h3><a name="Additive"></a>Additive</h3><p>Each pixel's color 
  209.         intensity is added to the intensity of the pixel values in the 
  210.         composition. This will always brighten pixels in the composition, except 
  211.         for pixels that are completely black which will be effectively 
  212.         transparent.</p>
  213.         <p>
  214.         <img border="1" src="../images/BlendMode_Additive.jpg" width="288" height="180"></p>
  215.         </li>
  216.         <li><h3><a name="ColorBurn"></a>Color Burn</h3><p>This blend mode has 
  217.         the effect such that dark pixels are made darker. Lighter pixels must be 
  218.         blended with other lighter pixels in order to remain bright.</p>
  219.         <p><img border="1" src="../images/BlendMode_ColorBurn.jpg"></p>
  220.         </li>
  221.         <li><h3><a name="ColorDodge"></a>Color Dodge</h3><p>This can be thought 
  222.         of as the opposite of Color Burn. Lighter pixels are kept light, whereas 
  223.         darker pixels must be blended with other dark pixels in order to remain 
  224.         dark.</p>
  225.         <p><img border="1" src="../images/BlendMode_ColorDodge.jpg"></p>
  226.         </li>
  227.         <li><h3><a name="Reflect"></a>Reflect</h3><p>This blend mode can be used 
  228.         for adding shiny objects or areas of light. </p>
  229.         <p><img border="1" src="../images/BlendMode_Reflect.jpg"></p>
  230.         </li>
  231.         <li><h3><a name="Glow"></a>Glow</h3><p>This is the reverse of the 
  232.         Reflect mode: it works the same as swapping the layer positions and 
  233.         using Reflect.</p>
  234.         <p><img border="1" src="../images/BlendMode_Glow.jpg"></p>
  235.         </li>
  236.         <li><h3><a name="Overlay"></a>Overlay</h3><p>This is a combination of 
  237.         Screen and Multiply depending on the intensity of the layer pixel. For 
  238.         darker colors, this acts like Multiply. For lighter colors, this acts 
  239.         like Screen.</p>
  240.         <p><img border="1" src="../images/BlendMode_Overlay.jpg"></p>
  241.         </li>
  242.         <li><h3><a name="Difference"></a>Difference</h3><p>The counterpart to 
  243.         Additive. The layer pixel's intensity is subtracted from the composition 
  244.         pixel's intensity resulting in darker colors. Since this can produce a 
  245.         negative intensity, which is not possible to display, the absolute value 
  246.         is used. Thus, both "white minus black" and "black minus white" will 
  247.         both produce white. This is quite often useful when using the <a href="EffectsMenu.html#Clouds">
  248.         Clouds</a> effect.</p>
  249.         <p><img border="1" src="../images/BlendMode_Difference.jpg"></p>
  250.         </li>
  251.         <li><h3><a name="Negation"></a>Negation</h3><p>At first glance this 
  252.         seems similar to Difference, but it actually produces the opposite 
  253.         effect. Instead of making colors darker, it will make them brighter.</p>
  254.         <p><img border="1" src="../images/BlendMode_Negation.jpg"></p>
  255.         </li>
  256.         <li><h3><a name="Lighten"></a>Lighten</h3><p>The lighter pixel of either 
  257.         the layer or the composition is used.</p>
  258.         <p><img border="1" src="../images/BlendMode_Lighten.jpg"></p>
  259.         </li>
  260.         <li><h3><a name="Darken"></a>Darken</h3><p>The darker pixel of either 
  261.         the layer or the composition is used.</p>
  262.         <p><img border="1" src="../images/BlendMode_Darken.jpg"></p>
  263.         </li>
  264.         <li><h3><a name="Screen"></a>Screen</h3><p>This can be thought of as the 
  265.         opposite of the Multiply blend mode. It is used to make pixels brighter, 
  266.         with black being effectively transparent. </p>
  267.         <p><img border="1" src="../images/BlendMode_Screen.jpg"></p>
  268.         </li>
  269.         <li><h3><a name="Xor"></a>Xor</h3><p>This is short for "<a href="http://en.wikipedia.org/wiki/Exclusive_or">exclusive 
  270.         OR</a>", which is an advanced blending mode that is primarily used for 
  271.         image analysis and not for drawing or image composition.</p>
  272.         <p><img border="1" src="../images/BlendMode_Xor.jpg"></p>
  273.         </li>
  274.     </ul>
  275.     <!-- #EndEditable -->
  276.     <h4><br>
  277.     <br>
  278.     </h4>
  279.     <p align="center">
  280.     <font color="#808080" size="1">Copyright <font face="Times New Roman">┬⌐ 2007 </font>
  281.     Rick Brewster, Tom Jackson, and past contributors. Portions Copyright
  282.     <font face="Times New Roman">┬⌐ 2007 </font>Microsoft Corporation. All Rights 
  283.     Reserved.</font><font size="1"> <br>
  284.     </font>
  285. </div>
  286. </b>
  287.  
  288. </body>
  289.  
  290. <!-- #EndTemplate -->
  291.  
  292. </html>
  293.